import React from "react";
import loadable from '@loadable/component'
const Home = loadable(() => import('./views/Home'), {
  fallback: <div>Loading...</div>,
});
const About = loadable(() => import('./views/About'), {
  fallback: <div>Loading...</div>,
});
const NotFound = loadable(() => import('./views/NotFound/404'), {
  fallback: <div>Loading...</div>,
});
// const AsyncPage = loadable(props => import(`./views/${props.page}`))

const routes = [
	{
		path: "/home",
		fetchComponent: import('./views/Home'),
		element: <Home/>,
	},
	{
		path: "/about",
		fetchComponent: import('./views/About'),
		element: <About/>,
	},
	{
		path: "*",
		fetchComponent: import('./views/NotFound/404'),
		element: <NotFound/>,
	},
];
export default routes;
